<template>
  <view v-if="loginFlag && hasSchool" class="hosting">
    <view class="hosting-header">
      <image class="header-bg" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/hosting_bg.png" />
      <view class="header-title">
        五商课堂
      </view>
      <view class="header-info">
        看视频 学五商 成长大能量
      </view>
      <view class="header-btn" @click="toWsClassroom">
        去学习
      </view>

      <view class="header-chat">
        <image class="chat-bg" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/hosting_chat.png" />
        <view class="chat-info">
          本月已学习{{ dataDetail?.courseHasLearn || 0 }}节
        </view>
      </view>
    </view>
    <view class="hosting-content">
      <view class="content-info">
        <view class="info-item">
          <view class="item-text">
            累计托管天数
          </view>
          <view class="item-num">
            {{ dataDetail?.custTotal === undefined ? '-' : dataDetail?.custTotal }}天
          </view>
        </view>
        <view class="info-item">
          <view class="item-text">
            本月已托管天数
          </view>
          <view class="item-num">
            {{ dataDetail?.curMonthTotal === undefined ? '-' : dataDetail?.curMonthTotal }}天
          </view>
        </view>
        <view class="info-item">
          <view class="item-text">
            剩余托管天数
          </view>
          <view class="item-num">
            {{ dataDetail?.residueTotal === undefined ? '-' : dataDetail?.residueTotal }}天
          </view>
        </view>
        <image class="hosting-icon icon-1" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/hosting_icon.png" />
        <image class="hosting-icon icon-2" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/hosting_icon.png" />
      </view>

      <view class="content-calendar">
        <view class="calendar-title">
          托管日历
        </view>
        <view class="calendar-lenged">
          <view class="lenged-item lenged-4">
            到课
          </view>
          <view class="lenged-item lenged-1">
            请假
          </view>
          <view class="lenged-item lenged-3">
            未签到
          </view>
        </view>
        <uni-calendar class="uni-calendar--hook" :selected="selectedDate" :show-month="false" @change="change" @month-switch="monthSwitch" />
        <view v-if="chooseData?.rollcallTime || chooseData?.realEndtime" class="calendar-info">
          <text class="info-date">
            {{ chooseDate }}
          </text>
          <view class="info-item">
            <text class="item-label">
              签到：
            </text>
            <text class="item-content" :class="!(chooseData?.rollcallTime) && 'content-error'">
              {{ chooseData?.rollcallTime || '未签到' }}
            </text>
          </view>
          <view class="info-item">
            <text class="item-label">
              签退：
            </text>
            <text class="item-content" :class="!(chooseData?.realEndtime) && 'content-error'">
              {{ chooseData?.realEndtime || '未签退' }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <NoDataPage v-else :status="!loginFlag ? 1 : 2" :info-text="!loginFlag ? '暂未登录，立即登录开启托管日程吧' : '暂无托管内容'" :btn-text="!loginFlag ? '登录' : '联系老师报名吧'" />
  <PublicAccount v-model:show-overlay="showPublicAccount" />
  <VipOverlay v-model:show="showVip" :type="vipType" />
  <ContactTeacher v-model:show-overlay="showTeacher" :type="2" />
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store';
import { isLogin } from '@/utils/auth';
import { getRollcallRecord } from '@/api/wsClassroom';
import type { GetRollcallRecordResult } from '@/api/wsClassroom/type';
import { getVipOrGzhStatus } from '@/api/user';
import { formatSimpleDate, getFirstDayOfMonth } from '@/utils/common';
import { getSignInfo, setSignInfo } from '@/utils/auth/index';

const store = useUserStore();
const loginFlag = ref<boolean>(isLogin());
const hasSchool = computed(() => !!store.schoolId); // 是否绑定门店

const selectedDate = ref<Array<{ date: string; data?: { status: string; rollcallTime: string; realEndtime: string } }>>([]);
const chooseDate = ref(formatSimpleDate());
const chooseData = ref<{ status: string; rollcallTime: string; realEndtime: string }>();
const change = (e: any) => {
  chooseDate.value = e.fulldate;
  chooseData.value = e.extraInfo.data;
};

const showPublicAccount = ref<boolean>(false); // 公众号弹窗

const dataDetail = ref<GetRollcallRecordResult>();
const getData = (date: string) => {
  getRollcallRecord({ month: date }).then((res: GetRollcallRecordResult) => {
    dataDetail.value = res;
    selectedDate.value = res.attendClassStudentList?.map((item) => {
      const data = {
        date: item.rollcallTime.slice(0, 10),
        data: {
          status: item.rollcall,
          rollcallTime: item.rollcallTime?.slice(11, 16),
          realEndtime: item.realEndtime?.slice(11, 16),
        },
      };
      if (item.rollcallTime.slice(0, 10) === chooseDate.value) {
        chooseData.value = data.data;
      }
      return data;
    });
  });
};

const monthSwitch = (e: any) => {
  const switchDate = `${e.year}-${e.month.toString().padStart(2, '0')}-01`;
  getData(switchDate);
};

const showVip = ref<boolean>(false);
const vipType = ref<number>(1);
const showTeacher = ref<boolean>(false);
// 去五商课堂
const toWsClassroom = () => {
  if (store.vip.flag === 2) { // vip过期
    vipType.value = 6;
    showVip.value = true;
    return;
  }
  if ([0, 3].includes(store.vip.flag)) { // vip未生效
    uni.$u.toast(store.vip.flag === 0 ? 'VIP未开通！' : 'VIP未生效！');
    return;
  }
  uni.navigateTo({
    url: '/pages/views/wsClassroom/index',
  });
};

// 获取公众号状态
const getStatus = () => {
  if (!hasSchool.value)
    return;
  getVipOrGzhStatus({ type: '2' }).then((res) => {
    const signData = JSON.parse(getSignInfo() || '{}');
    if (!signData?.accoutDay || signData.accoutDay !== formatSimpleDate(new Date())) {
      if (!Number(res.flag)) {
        showPublicAccount.value = true;
        const data = {
          ...signData,
          accoutDay: formatSimpleDate(new Date()),
        };
        setSignInfo(JSON.stringify(data));
      }
    }
  });
};

onShow(() => {
  if (loginFlag.value) {
    getData(getFirstDayOfMonth());
    getStatus();
  }
});

// 分享
uni.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline'],
});
onShareAppMessage(() => {
  return {
    title: store.share_txt,
    imageUrl: store.share_pic_url,
  };
});
</script>

<style lang="scss">
.hosting {
  height: 100%;
  padding: 50rpx 40rpx 0 40rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .hosting-header {
    position: relative;
    width: 670rpx;
    height: 288rpx;
    padding: 46rpx 42rpx;

    .header-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 670rpx;
      height: 288rpx;
      z-index: -1;
    }

    .header-title {
      padding-top: 8rpx;
      font-weight: bold;
      font-size: 36rpx;
      line-height: 43rpx;
      color: #FFFAED;
    }

    .header-info {
      padding-top: 16rpx;
      padding-bottom: 32rpx;
      font-size: 24rpx;
      line-height: 28rpx;
      color: #CACACA;
    }

    .header-btn {
      display: inline-block;
      padding: 0 90rpx;
      height: 70rpx;
      background: linear-gradient( 90deg, #FFA029 0%, #FFCD29 100%);
      box-shadow: inset 0 -4rpx 20rpx 0 #FFB085;
      border-radius: 35rpx;

      font-weight: bold;
      font-size: 32rpx;
      line-height: 70rpx;
      color: #FFFFFF;
    }

    .header-chat {
      position: absolute;
      top: -97rpx;
      right: 160rpx;
      width: 250rpx;
      height: 244rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 8rpx;
      padding-right: 4rpx;

      .chat-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 250rpx;
        height: 244rpx;
      }

      .chat-info {
        position: relative;
        width: 124rpx;
        font-size: 24rpx;
        color: #3F1F16;
        line-height: 30rpx;
        font-weight: bold;
        text-align: center;
        transform: rotate(-13deg);
      }
    }
  }

  .hosting-content {
    flex: 1;
    overflow: auto;
    margin-top: 48rpx;

    .content-info {
      position: relative;
      padding: 32rpx 40rpx 48rpx 40rpx;
      background: #fff;
      border-radius: 24rpx;
      display: flex;
      justify-content: space-between;
      z-index: 1;

      .info-item {

        .item-text {
          font-size: 24rpx;
          color: #87837B;
          line-height: 36rpx;
        }

        .item-num {
          padding-top: 8rpx;
          font-weight: bold;
          font-size: 32rpx;
          color: #251504;
          line-height: 48rpx;
        }
      }

      .hosting-icon {
        position: absolute;
        width: 20rpx;
        height: 76rpx;
        bottom: -48rpx;
      }

      .icon-1 {
        left: 95rpx;
      }

      .icon-2 {
        right: 95rpx;
      }
    }

    .content-calendar {
      padding: 48rpx 32rpx;
      margin-top: 20rpx;
      margin-bottom: 40rpx;
      background-color: #fff;
      border-radius: 32rpx;

      .calendar-title {
        font-weight: bold;
        font-size: 32rpx;
        color: #251504;
        line-height: 48rpx;
      }

      .calendar-lenged {
        padding: 16rpx 0 40rpx 0;
        display: flex;
        align-items: center;

        .lenged-item {
          position: relative;
          padding-left: 24rpx;
          padding-right: 48rpx;
          font-size: 24rpx;
          color: #87837B;
          line-height: 34rpx;

          &::after {
            position: absolute;
            content: '';
            top: 9rpx;
            left: 0;
            width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
          }
        }

        .lenged-4 {
          &::after {
            background-color: #B2D233;
          }
        }

        .lenged-1 {
          &::after {
            background-color: #FF3737;
          }
        }

        .lenged-3 {
          &::after {
            background-color: #FF6B3A;
          }
        }
      }

      .uni-calendar__content {
        padding: 40rpx 0;
        border-top: 2rpx dashed #EDEDED;
        border-bottom: 2rpx dashed #EDEDED;

        .uni-calendar__header {
          height: 42rpx;
          padding: 0 30rpx;
          justify-content: space-between;
          border: none;

          .uni-calendar__header-btn-box {
            width: 32rpx;
            height: 32rpx;
          }

          .uni-calendar__backtoday {
            display: none;
          }
        }

        .uni-calendar__weeks {
          padding-top: 24rpx;

          .uni-calendar-item__weeks-box-item {
            width: auto !important;
            height: 74rpx !important;
            padding-bottom: 16rpx;
          }
        }

        .uni-calendar__weeks-day {
          height: auto;
          padding-top: 16rpx;
          padding-bottom: 24rpx;
          border: none;

          .uni-calendar__weeks-day-text {
            font-size: 24rpx;
            color: #313131;
            line-height: 36rpx;
          }
        }

        .uni-calendar-item--isDay {
          background: transparent;

          .uni-calendar-item__weeks-box-text {
            width: 48rpx;
            height: 48rpx;
            text-align: center;
            line-height: 48rpx;
            background: linear-gradient( 90deg, #61E569 0%, #31C966 100%);
            border-radius: 50%;
          }
        }
      }

      .calendar-info {
        padding-top: 42rpx;
        padding-bottom: 20rpx;
        display: flex;
        align-items: center;

        .info-date {
          font-size: 24rpx;
          color: #888888;
          line-height: 36rpx;
        }

        .info-item {
          padding-left: 40rpx;

          .item-label, .item-content {
            font-size: 28rpx;
            color: #666666;
            line-height: 42rpx;
          }

          .content-error {
            color: #FF3737;
          }
        }
      }
    }
  }
}
</style>
